<template>
	<view class="homeBody">
		<u-sticky>
			<view class="header_box">
				<view class="sousuo_box">
					<view class="search_box">
						<u-search v-model="keyword" placeholder="搜索商品" border-color="#000000" color="#fff"
							:show-action="false" shape="round" height="60" :action-style="{ color: '#fff' }"
							@search="search" borderColor="#FFE7C0" bgColor="none" placeholderColor="#fff">
						</u-search>
					</view>
					<view class="header_right_box" @click="sousuo">
						搜索
					</view>
				</view>
				<view class="tabs_box">
					<view class="tabs_left_box">
						<u-tabs :list="navList" bg-color="none" is-scroll :current="current" @change="change"
							:barStyle="barStyle" active-color="#fff" inactive-color="#fff"></u-tabs>
					</view>
					<view class="tabs_right_box">
						<view class="fenlei_box">
						</view>
					</view>
				</view>
			</view>
		</u-sticky>

		<view class="head-box">
			<!-- 轮播区 -->
			<!-- <view class="home-header">
				<view class="swipe-banner">
					<u-swiper :list="malldata.banner" name='pic_url' height="280" bg-color="transparent" @click="bannerClick" img-mode="scaleToFill"
						border-radius="10"></u-swiper>
				</view>
			</view> -->
			<!-- 分类入口区 -->
			<view class="sortWrap">
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="shop_box">
			<view class="shopdetail_box" @click.stop="goDetail(item)" v-for="(item, index) in goodsList" :key="index">
				<view class="top_pic_box">
					<image :src="item.cover_pic" mode="scaleToFill" />
				</view>
				<view class="shop_name_box">{{ item.title }}</view>
				<view class="shop_price_box">¥{{ item.price }}</view>
				<view class="shop_pep_box">{{ item.sales }}w+人购买</view>

			</view>
		</view>

		<u-back-top :scroll-top="scrollTop"></u-back-top>

		<!-- <u-empty v-if="goodsList == ''" text="暂无数据" mode="list"></u-empty> -->

		<u-loadmore :status="morestatus" v-if="goodsList != ''" :load-text="loadText" />


		<!-- 支付弹窗 -->
		<template>
			<u-popup ref="zhifuShowtc" :show="zhifuShow" :round="10" mode="bottom" @close="close" @open="open">
				<view class="zf_box">
					<view class="top_box">注：商品购买后将进入盒柜
						<text style="color: #FA2929;">待处理</text>
						，请及时在
						<text style="color: #FA2929;">盒柜</text>
						进行发货等操作
					</view>
					<view class="title_box">
						<view class="center_box">确认购买</view>
						<view class="guanbi_box" @click="guanbizftc">
							<u-icon name="close" color="#666666" size="30"></u-icon>
						</view>
					</view>
					<view class="bottom_box">
						<view class="shangpin_detil_box">
							<view class="left_box">
								<image :src="shopDetail.cover_pic" mode="scaleToFill" />
							</view>
							<view class="right_box">
								<view class="top_txt">{{ shopDetail.title }}</view>
								<view class="two_txt">规格：默认</view>
								<view class="thr_txt">{{ shopDetail.original_price }}</view>
							</view>
						</view>
						<!-- 正品保障 -->
						<view class="zhengpin_box">
							正品保障
						</view>
						<view class="shopNum_box">
							<view class="txt_box">购买数量</view>
							<view class="num_box">
								<u-number-box :min="1" :longPress="false" :disabledInput="true" v-model="numValue"
									@change="valChange"></u-number-box>
							</view>
						</view>
						<!-- 支付方式 -->
						<view class="zf_box">
							<view class="zhifu_txt">支付方式</view>
							<view class="order-con">

								<view @click="zfClick(1)">
									<view>
										<image src="https://pd.pdaxiang.com/upload/static/newImg/weixin.png"></image>
										<text>微信支付</text>
									</view>
									<view class="">
										<image src="https://pd.pdaxiang.com/upload/static/newImg/yes.png" mode="aspectFill"
											v-if="zfck == 1">
										</image>
										<image src="https://pd.pdaxiang.com/upload/static/newImg/weixuan.png" v-else>
										</image>
									</view>
								</view>

								<!-- #ifndef  MP-WEIXIN -->
								<view @click="zfClick(2)">
									<view>
										<image src="https://pd.pdaxiang.com/upload/static/newImg/zhifubao.png"></image>
										<text>支付宝支付</text>
									</view>
									<view class="">
										<image src="https://pd.pdaxiang.com/upload/static/newImg/yes.png" v-if="zfck == 2">
										</image>
										<image src="https://pd.pdaxiang.com/upload/static/newImg/weixuan.png" v-else>
										</image>
									</view>
								</view>
								<!-- #endif -->
								<view @click="zfClick(3)">
									<view>
										<image
											src="https://new.qingfentool.vip/upload/image/20230809/28b1e4339efd215e80df5b506b3e5ea2.png">
										</image>
										<text>余额支付</text>
									</view>
									<view class="">
										<image src="https://pd.pdaxiang.com/upload/static/newImg/yes.png" mode="aspectFill"
											v-if="zfck == 3">
										</image>
										<image src="https://pd.pdaxiang.com/upload/static/newImg/weixuan.png" v-else>
										</image>
									</view>
								</view>
							</view>
						</view>
						<!-- 协议 -->
						<view class="tab_xieyi" @tap="goCheck">
							<image :src="iconurl + '/static/index/pzselect3.png'" v-if="xieyiStu == false"></image>
							<image :src="iconurl + '/static/index/pzselect4.png'" v-else></image>
							<view class="" style="color: black; height: 100rpx; line-height: 100rpx;">已阅读并同意
								<text style="color: #FFB02E;"
									@click.stop="goUrl('/userPage/user/agreement?id=2')">《用户协议》</text>
							</view>
						</view>
						<view class="subMit">
							<view class="left_box" style="color: #333333;">
								合计：
								<text class="txt2" style="color: #FA2929;">¥{{ (shopDetail.price * eValue).toFixed(2)
								}}</text>
							</view>
							<view class="right_box">
								<view class="shopBtn_box" @click="submitBtn((shopDetail.price * eValue).toFixed(2))">立即支付
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>

			<zdy-tabbar :current-page="1"></zdy-tabbar>
		</template>
		<view style="height:130rpx"></view>
	</view>
</template>

<script>
import goodsCard from '@/components/mall/goodsCard'
export default {
	components: {
		goodsCard,
	},
	data() {
		return {
			payurl: '',
			order_id: '',
			hejiNum: 0,//
			zfck: 1, //1微信2支付宝
			xieyiStu: false,
			numValue: 1,//购买数量
			eValue: 1,//计数器当前值
			current: 0,
			customstyle: {
				backgroundColor: '#FFFFFF'
			},
			zhifuShow: false,//支付弹窗
			stateindex: 0,
			background: {
				backgroundColor: ''
			},
			loadText: {
				loadmore: '上拉加载更多',
				loading: '正在加载，请喝杯茶',
				nomore: '我是有底线的'
			},
			morestatus: "loadmore",
			page: 1,
			goodsList: [],
			malldata: {
				banner: [],
				cat: [],
			},
			barStyle: {
				backgroundColor: "#FED187"
			},
			scrollTop: 0,
			navIndex: 0,
			sortList: [],
			swiperItems: [],
			timeBanner: '',
			goodsinfo: {},
			loadingType: 0,
			seckillTime: {
				hour: 0,
				coundown: 0
			},
			xm: 0,
			isShow: [],
			cardInfo: {
				seckill: {},
				live: {},
				assemble: {},
				new_goods: {}
			},
			isScrollTop: false,
			shopList: [],
			homeBg: {},
			bgColor: '',
			country: '',
			navList: [],
			stickyTop: 175,
			navBarHeight: 88,
			activeItemStyle: {
				fontSize: '34rpx'
			},
			backIconName: 'grid-fill',
			keyword: '',
			offsetTop: 0,
			messageBadgeShow: false,
			couponBadgeShow: false,
			capsule: {}, // 胶囊图
			cat_id: "", //分类id
			iconurl: this.$configs.urls,
			shopDetail: {//商品详情对象
				cover_pic: '',
				goods_id: '',
				integral: '',
				is_displaces: '',
				original_price: '',
				price: '',
				sales: '',
				title: ''
			},
			hejiPrice: '',
			code: '',
			goodId: '',//商品Id
			combination: ''

		}
	},

	mounted() {

	},

	onLoad() {
		this.loadingType = 0
		this.goodsList = []
		this.isInfoShow = false
		this.stickyTop = 1;
		this.getBannerList()
		// #ifdef MP-WEIXIN
		//获取胶囊按钮的布局位置信息，坐标信息以屏幕左上角为原点
		let custom = wx.getMenuButtonBoundingClientRect()
		//导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度。
		// this.stickyTop = custom.bottom + custom.top - uni.getSystemInfoSync().statusBarHeight
		// #endif

	},

	onShow() {
		this.setOffestTop()
		// #ifdef MP-WEIXIN
		this.getcode()
		// #endif
	},
	onHide() {
		this.$refs.zhifuShowtc.close()
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
		if (e.scrollTop > 10) {
			this.isScrollTop = true
			this.background.backgroundColor = "#fff"
		} else {
			this.isScrollTop = false
			this.background.backgroundColor = ""
		}
	},
	methods: {
		valChange(e) {//计数器
			//console.log('当前值为: ' + e.value)
			this.eValue = e.value
		},
		change(index) {
			this.current = index
			this.stateindex = index
			this.page = 1;
			this.navIndex = index
			this.sortList = []
			this.cat_id = this.navList[index].id
			for (let i = 0; i < this.navList[index].childlist.length; i++) {
				this.sortList.push(this.navList[index].childlist[i])
			}
			if (this.navIndex != 0) {
				this.sortList.push({
					name: "更多",
					id: "-1",
					icon: "https://pd.pdaxiang.com/upload/static/mall/gengduo.png"
				})
			}
			this.getGoodsList()
		},
		open() {
			this.zhifuShow = true
		},
		close() {//关闭支付弹窗
			this.zhifuShow = false
			this.xieyiStu = false
		},
		// 同意协议
		goCheck() {
			this.xieyiStu = !this.xieyiStu;
		},
		// 用户协议
		goUrl(url) {
			uni.navigateTo({
				url: url
			});
		},

		zfClick(infock) {
			this.zfck = infock
		},

		getInfo() {
			// #ifdef APP-PLUS
			var data = {
				num: this.eValue,
				pay_type: this.zfck,
				goods_id: this.goodId,
				combination: this.combination.toString()
			}
			// #endif
			// #ifdef MP-WEIXIN
			var data = {
				js_code: this.code,
				num: this.eValue,
				pay_type: this.zfck,
				is_xwechat: 1,
				wechat_type: uni.getStorageSync('wechat_type'),
				goods_id: this.goodId,
				combination: this.combination.toString()
			}
			// #endif
			uni.showLoading({
				title: '正在加载中....'
			})
			//console.log('data', data)
			this.$Request.post(this.$api.mall.createOrder, data).then(res => {
				uni.setStorageSync('cabShuaxin', 1)
				//console.log(res.code, '123')
				if (res.code == 0) {
					uni.hideLoading()
					this.payurl = res.data.pay_data
					this.order_id = res.data.order_id
					this.Payment(res.data.pay_data)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})
		},
		Payment(pay_data) {
			let provider = ''
			if (this.zfck == 1) {
				provider = 'wxpay'
			} else if (this.zfck == 3) {
				uni.showToast({
					title: '支付成功',
					icon: 'none'
				})
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/cabinetBox'
					})
				},800)
			} else {
				provider = 'alipay'
			}
			//调用支付`
			let that = this
			uni.requestPayment({
				provider: provider,
				// #ifdef APP-PLUS
				orderInfo: pay_data,
				// #endif
				// #ifdef MP-WEIXIN
				timeStamp: pay_data.timeStamp,
				nonceStr: pay_data.nonceStr,
				signType: 'MD5',
				package: pay_data.package,
				paySign: pay_data.paySign,
				// #endif
				success() {
					uni.setStorageSync('cabShuaxin', 1)
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					})
					uni.switchTab({
						url: '/pages/index/cabinetBox'
					})
				},
				
			})
		},
		getcode() {
			let that = this
			uni.login({
				provider: 'weixin',
				success: function (res) {
					that.code = res.code
				}
			})
		},
		submitBtn(item) {
			console.log(this.zfck, item)
			if (!this.xieyiStu) {
				uni.showToast({
					title: '请先勾选阅读并同意充值协议',
					icon: 'none',
				})
				return
			}
			this.hejiNum = item

			this.$nextTick(() => {
				this.getInfo()
				//  #ifdef MP-WEINXIN
				this.getcode()
				// #endif

			})

		},
		// checkbox(index) {
		// 	this.stateindex = index
		// 	this.page = 1;
		// 	this.navIndex = index
		// 	this.sortList = []
		// 	this.cat_id = this.navList[index].id
		// 	for (let i = 0; i < this.navList[index].childlist.length; i++) {
		// 		this.sortList.push(this.navList[index].childlist[i])
		// 	}
		// 	if (this.navIndex != 0) {
		// 		this.sortList.push({
		// 			name: "更多",
		// 			id: "-1",
		// 			icon: "https://pd.pdaxiang.com/upload/static/mall/gengduo.png"
		// 		})
		// 	}
		// 	this.getGoodsList()
		// },
		goIndex() {
			uni.switchTab({
				url: "/pages/index/redouble"
			})
		},
		guanbizftc() {
			this.$refs.zhifuShowtc.close()
		},
		goDetail(item) {
			// //console.log(item, "123")
			this.$refs.zhifuShowtc.open()
			this.goodId = item.goods_id
			this.combination = item.attr_group_list[0].attr_list[0].attr_id
			this.numValue = 1
			this.shopDetail = item
		},
		search() {
			this.cat_id = ''
			this.page = 1
			this.goodsList = []
			this.getGoodsList()
		},
		sousuo() {
			this.cat_id = ''
			this.page = 1
			this.goodsList = []
			this.getGoodsList()
		},
		goallFenlei() {
			uni.navigateTo({
				url: "/mallPage/mall/fenleiIndex"
			})
		},
		changeNav(index) {
			this.page = 1;
			this.$refs.goodsWaterfall.clear();
			this.navIndex = index
			this.sortList = []
			this.cat_id = this.navList[index].id
			for (let i = 0; i < this.navList[index].childlist.length; i++) {
				this.sortList.push(this.navList[index].childlist[i])
			}
			this.getGoodsList()
		},
		// 适配吸顶tab高度
		setOffestTop() {
			let systemInfo = uni.getSystemInfoSync()
			this.offsetTop = systemInfo.statusBarHeight + 44 // 顶部状态栏+沉浸式自定义顶部导航
		},
		getBannerList() {
			this.$Request.get(this.$api.mall.index).then(res => {
				this.malldata = res.data
				this.navList = this.malldata.cat
				for (let i = 0; i < this.navList.length; i++) {
					this.sortList = this.navList[0].childlist
				}
				this.sortList.push({
					name: "更多",
					id: "-1",
					icon: "https://pd.pdaxiang.com/upload/static/mall/gengduo.png"
				})
				this.cat_id = this.navList[0].id
				this.getGoodsList()
			});
		},
		bannerClick(index) {
			let ad = this.bannerList[index];

		},
		getMenuList() {
			// this.$http.getMenuList().then(res => {
			// 	this.sortList = res.data.menu_list
			// })
		},
		goLink(cat_id) {
			if (cat_id == -1) {
				uni.navigateTo({
					url: "/mallPage/mall/fenleiIndex?cat_id=" + cat_id
				})
				return
			}
			uni.navigateTo({
				url: "/mallPage/mall/categoryGoods?cat_id=" + cat_id
			})
		},

		getGoodsList(type) {
			// //console.log(type, "type")
			let data = {
				page: this.page,
				cat_id: this.cat_id,
				keyword: this.keyword
			}
			uni.showLoading({
				title: "加载中..."
			})
			this.$Request.get(this.$api.mall.goodsList, data).then(res => {
				uni.hideLoading()
				if (type == 2) {
					this.goodsList = this.goodsList.concat(res.data.list);
					if (res.data.list == '') {
						this.morestatus = "nomore"
					}
				} else {
					this.goodsList = res.data.list;
					this.morestatus = "loadmore"
				}
			});
		},

		gethomeInfo() {
			this.$http.gethomeInfo().then(res => {
				if (res.status == 200) {
					const date = new Date(Number(res.data.hdinfos.hdtime) * 1000)
					this.seckillTime.hour = date.getHours() > 9 ? date.getHours() : '0' + date.getHours()
					this.seckillTime.countdown = Number(res.data.hdinfos.end_time) - Number(res.data.hdinfos
						.dqtime)
				}
			})
		},

		getTab(src) {
			uni.switchTab({
				url: src
			})
		}
	},

	onPullDownRefresh() {
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 1000)
		clearTimeout();
		this.$refs.goodsWaterfall.clear();
		this.page = 1
		this.goodsList = []
		this.getGoodsList()
		this.gethomeInfo()

	},

	onReachBottom() {
		this.morestatus = "loading"
		this.page++
		this.getGoodsList(2)
	}
}
</script>

<style lang="scss" scoped>
.shop_box {
	width: 100vw;
	min-height: 100vh;
	background-color: #262626;
	display: flex;
	padding-top: 10rpx;
	overflow: hidden;
	justify-content: flex-start;
	flex-wrap: wrap;

	.shopdetail_box {
		width: 348rpx;
		height: 450rpx;
		border: 1rpx solid #FED187;
		background: rgba(255, 231, 192, 0.1);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		margin-left: 22rpx;
		margin-bottom: 18rpx;
		padding-top: 24rpx;

		.top_pic_box {
			width: 288rpx;
			height: 256rpx;
			border-radius: 10rpx 10rpx 0rpx 0rpx;
			opacity: 1;
			border: 1rpx solid #FED187;
			background: rgba(0, 0, 0, 0.2);
			margin: auto;
			margin-bottom: 6rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.shop_name_box {
			width: 300rpx;
			height: 56rpx;
			font-size: 20rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #fff;
			margin: auto;
			margin-bottom: 12rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}

		.shop_price_box {
			width: 300rpx;
			height: 52rpx;
			font-size: 36rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFAE2A;
			margin: auto;
		}

		.shop_pep_box {
			width: 300rpx;
			height: 26rpx;
			font-size: 18rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #fff;
			margin: auto;
			text-align: right;
		}

	}
}

.tab-item::-webkit-scrollbar {
	display: none
}

.tab {
	display: flex;
	align-items: center;
	width: 750rpx;
	overflow-x: hidden;
	padding: 0 20rpx;
	background-color: red;
	// height: 80rpx;

	.tab-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-right: 30rpx;

		view {
			font-size: 30rpx;
			color: #fff;
		}

		text {
			display: block;
			margin-top: 6rpx;
		}

		.activetext {
			color: #FFFFFF
		}


		.activeline {
			display: block;
			width: 43rpx;
			height: 6rpx;
			background: #FFF;
			border-radius: 1rpx;
		}
	}

}

.head_guanggao {
	// margin-top: 20rpx;
	margin-bottom: 46rpx;

	image {
		width: 710rpx;
		height: 87rpx;
	}
}

.cardTit {
	margin-bottom: 46rpx;
	margin-top: 50rpx;
}

.goodlist {}

.homeBody {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center 170rpx;

	.header_box {
		width: 100%;
		height: 234rpx;
		overflow-x: hidden;
		background-color: #262626;
		padding-top: 90rpx;

		.sousuo_box {
			width: 100%;
			height: 60rpx;
			padding-left: 22rpx;
			display: flex;
			/* #ifdef APP-PLUS */
			justify-content: space-around;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			justify-content: flex-start;
			/* #endif */
			align-items: center;



			.search_box {

				/* #ifdef APP-PLUS */
				margin: auto;
				width: 706rpx;
				/* #endif */
				/* #ifdef MP-WEIXIN */
				width: 400rpx;
				/* #endif */
				height: 74rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;

			}

			.header_right_box {
				width: 134rpx;
				height: 56rpx;
				background: linear-gradient(180deg, #FED187 0%, #FFAE2A 100%);
				border-radius: 130rpx 130rpx 130rpx 130rpx;
				text-align: center;
				line-height: 56rpx;
				color: #fff;
				margin-left: 10rpx;
			}

		}

		.tabs_box {
			width: 100%;
			height: 60rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.tabs_left_box {
				width: 100%;
				height: 60rpx;
				padding-bottom: 5rpx;
			}

			.tabs_right_box {
				width: 10%;
				height: 52rpx;
				position: relative;
				padding-top: 5rpx;

				.fenlei_box {
					width: 44rpx;
					height: 52rpx;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}


// .headernavbar2 {
// 	width: 750rpx;
// 	height: 220rpx;
// 	background-color: linear-gradient(180deg, #FFE159 21%, rgba(255,209,0,0) 100%);
// }

.headernavbar {
	width: 750rpx;
	background-color: linear-gradient(180deg, #FFE159 21%, rgba(255, 209, 0, 0) 100%);
}

.home-header {
	width: 100%;
	margin-top: -50rpx;
	/* #ifdef H5 */
	margin-top: -100rpx;

	/* #endif */
	.swipe-banner {
		width: 710rpx;
		margin: 0 auto;
		// margin: 0rpx 25rpx 30rpx;
	}

}

// .sortWrap {
// 	padding: 0;
// 	display: flex;
// 	flex-wrap: wrap;




// }


.shopWindow {
	width: 50% !important;
}

.bu_class {
	margin-top: 25rpx;
	padding: 0 10rpx;
}

/*#ifdef  MP-WEIXIN*/
.headernavbar2 {
	width: 750rpx;
	height: 310rpx;
	padding-top: 80rpx;
}

/*#endif*/
/*#ifdef  MP-WEIXIN*/
/deep/ .u-navbar-fixed {
	padding-top: 65rpx;
}

/*#endif*/

.seckillShopWindow {
	border-radius: 16rpx 0 0 0;
	overflow: hidden;

	/deep/.u-image__image {
		width: 80% !important;
	}
}

.newShopWindow {
	border-radius: 16rpx 0 0 0;
	overflow: hidden;
}

.assembleShopWindow {
	border-radius: 0 16rpx 0 0;
	overflow: hidden;
}

.bu_items {
	.icon {
		border-radius: 120px;
		animation: breathe 3s ease-in .2s infinite;
		box-shadow: 0 0 0 6rpx #ffbdbd, 0 0 0 10px #ffeded;
	}
}

@keyframes breathe {
	0% {
		transform: scale(0.7);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(0.7);
	}
}


.navbar-right {
	// margin-right: 24rpx;
	display: flex;
}

.search-wrap {
	margin: 0 20rpx;
	flex: 1;
}

.right-item {
	margin: 0 24rpx;
	position: relative;
	color: #ffffff;
	display: flex;

	image {
		width: 52rpx;
		height: 52rpx;
	}
}

.txt_box {
	padding-left: 10rpx;
	font-size: 24rpx;
	color: #333333;
	margin-right: 18rpx;
}

.slot-wrap {
	display: flex;
	align-items: center;
	// flex: 1;
}

/deep/ .u-navbar-inner {
	margin-right: 0rpx !important;
}

.seckill-badge {
	color: #fff;
	font-size: 24rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 32rpx;
	border-radius: 6rpx;
	padding: 2rpx;
	border-top-right-radius: 0rpx;
	border-bottom-right-radius: 0rpx;
}

.seckill-badge-countdown {
	background-color: rgba(249, 161, 161, 0.2);
	color: #fff;
	font-size: 24rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 32rpx;
	border-radius: 6rpx;
	padding: 2rpx;
	border-top-left-radius: 0rpx;
	border-bottom-left-radius: 0rpx;

}

/deep/.u-countdown .u-countdown-colon {
	padding: 0;
}

/deep/.u-countdown .u-countdown-item {
	padding: 0;
}

.seckill-slot-wrap {
	display: flex;
}

.zf_box {
	width: 100%;
	height: 1067rpx;

	.top_box {
		width: 100%;
		height: 66rpx;
		line-height: 66rpx;
		text-align: center;
		background: #FEF5D2;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		font-size: 22rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.title_box {
		width: 100%;
		height: 94rpx;
		position: relative;
		color: #333333;
		line-height: 94rpx;

		.center_box {
			margin: auto;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 700;
			color: #333333;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.guanbi_box {
			width: 30rpx;
			height: 30rpx;
			margin-right: 35rpx;
			float: right;
		}
	}

	.bottom_box {
		width: 94%;
		height: 734rpx;
		margin: auto;

		.shangpin_detil_box {
			width: 100%;
			height: 178rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.left_box {
				width: 178rpx;
				height: 178rpx;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				opacity: 1;
				border: 1rpx solid #5191FF;
				margin-right: 28rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.right_box {
				width: 400rpx;
				height: 178rpx;

				.top_txt {
					width: 382rpx;
					height: 34rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					line-height: 34rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.two_txt {
					width: 200rpx;
					height: 34rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #666666;
					line-height: 34rpx;
					margin-top: 30rpx;
					margin-bottom: 32rpx;
				}

				.thr_txt {
					height: 40rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FA2929;
					line-height: 40rpx;
				}
			}
		}
	}

	.zhengpin_box {
		margin: 20rpx 0 30rpx 10rpx;
		width: 136rpx;
		height: 36rpx;
		text-align: center;
		line-height: 36rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #FFB02E;
		border: 1rpx solid #FFB02E;
		// image {
		// 	width: 136rpx;
		// 	height: 100%;
		// }
	}

	.shopNum_box {
		width: 100%;
		height: 50rpx;
		padding-right: 25rpx;
		padding-left: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 52rpx;

		.txt_box {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #333333;
		}

		.num_box {
			width: 168rpx;
			height: 50rpx;
			// background-color: red;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			opacity: 1;
			display: flex;

			/deep/.u-number-input {
				height: 48rpx !important;
				width: 66rpx !important;
				text-align: center !important;
				font-size: 28rpx !important;
				color: #333333 !important;
				border: 1rpx solid #E4E4E4 !important;
				margin: 0 !important;
			}

			/deep/.u-icon-plus {
				height: 52rpx !important;
				width: 56rpx !important;
				border: 1rpx solid #E4E4E4 !important;
				background: none !important;
				border-left: none !important;
			}

			/deep/.u-icon-minus {
				height: 52rpx !important;
				width: 56rpx !important;
				background: none !important;
				border: 1rpx solid #E4E4E4 !important;
				border-right: none !important;
			}

		}
	}

	// 支付方式
	.zf_box {
		width: 100%;
		height: 224rpx;

		margin: 0 0 50rpx 0;


		.zhifu_txt {
			width: 100%;
			height: 40rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 600;
			color: #333333;
			padding-left: 20rpx;


		}

		.order-con {
			/* #ifdef MP-WEIXIN */
			padding-top: 40rpx;
			/* #endif */
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 20rpx;
			padding-right: 25rpx;

			view {
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					margin-top: 28rpx;

					text {
						margin-left: 18rpx;
					}
				}
			}

			image {
				width: 49rpx;
				height: 49rpx;
			}
		}
	}

	.tab_xieyi {
		width: 100%;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 600;
		margin-bottom: 30rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}

		view {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #3D3D3D;
			padding-left: 20rpx;
		}
	}

	.subMit {
		width: 100%;
		height: 56rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left_box {
			width: 45%;
			height: 100%;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 700;
			line-height: 56rpx;
		}

		.right_box {
			width: 45%;
			height: 100%;

			.shopBtn_box {
				width: 156rpx;
				height: 100%;
				text-align: center;
				line-height: 56rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				background: #FFB02E;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				float: right;
				margin-right: 30rpx;
			}
		}
	}
}
</style>
